<template>
  <div class="menu">
<!--    左侧导航栏-->
    <div class="menu-left">
      <ul>
        <li  class="menu-item" v-for="item in tagList" :key="item.id" :class="{active: (item.id-1) === currentIndex}" @click="clickList(item.id-1)">
          <p class="text">{{item.name}}</p>
        </li>
      </ul>
    </div>
<!--    右侧导航栏-->
    <div class="menu-right" ref="itemList">
      <ul>
        <li class="cate" v-for="item in tagList" :key="item.id">
          <h4 class="cate-itile">{{item.name}}</h4>
          <ul class="cate-item">
            <li v-for="items in item.subItem" :key="items.id">
              <div class="cate-item-img" ><img :src="items.image" alt=""></div>
              <span>{{items.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "CategoryContent",
        props:{
          tagList:Array
      },
      watch:{
          tagList(){
            this.$nextTick(() =>{
              this._initBScroll()
              // 记录右侧所有盒子的高度
              this._initRightHeight()
            })
          }
      },
      methods:{
          _initBScroll(){
            this.leftBScroll=new BScroll('.menu-left',{
              click:true,
              mouseWheel:true
            })
            this.rightBScroll=new BScroll('.menu-right',{
              click: true,
              mouseWheel: true,
              probeType:3
            })
            this.rightBScroll.on('scroll',pos =>{
              const scrolly= Math.abs(pos.y)
              for (var i=0;i<this.rightLiTops.length -1;i++) {
                if(scrolly >= this.rightLiTops[i] && scrolly <this.rightLiTops[i+1]){
                  this.currentIndex=i
                }
              }
            })

          },
          _initRightHeight(){
            const itemArray=[]
            //
            var top =0
            // 把第一个li的盒子的Y坐标存入数组
            itemArray.push(top)
            const  allList=this.$refs.itemList.getElementsByClassName('cate')
            //使用for循环不断获取盒子高度做累加，累加后的数值就是每个标题的y坐标
            for (var i = 0; i < allList.length;i++){
              top+=allList[i].clientHeight
              itemArray.push(top)
            }
            this.rightLiTops=itemArray
          },
        // 将itemArray里的数组储存到data中方便其他方法调用
        clickList(index){
            this.currentIndex=index
            const y = -this.rightLiTops[index]
            this.rightBScroll.scrollTo(0,y)


        }

      },
      data(){
        return{
          currentIndex:0,
          rightLiTops:[],
          active: 'active'
        }
      }
    }
</script>

<style scoped lang="stylus">
  ul
    margin 0
    padding 0
  li
    list-style none
  .menu
    display flex
    position absolute
    text-align center
    top 0
    bottom 50px
    width 100%
    overflow hidden
    .menu-left
      flex 0 0 80px
      width 80px
      background #f3f5f7
      .menu-item
        height 54px
        width 100%

        .text
          width 100%
          line-height 54px
          margin-bottom 0
          text-align center
      .active
        width 100%
        background-color white
        .text
          color #e02e24
      .current
        width 100%
        background #fff
        .text
          color #e02e24

    .menu-right
      flex 1
      background-color white
      .cate
        height 100%
        .cate-itile
          margin 0
          text-align left
          font-size 14px
          color #333333
          padding 10px
        .cate-item
          padding 7px 10px 10px
          display flex
          overflow hidden
          flex-flow row wrap
          li
            width 33.3%
            .cate-item-img
              width 100%
              img
                width 5rem
                height 5rem
          span
            display inline-block
            font-size 14px
            color #333333


</style>
